<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body>
    <section id="wrap">
      <h2 class="title">百度音乐榜单</h2>
      <ul id="list">
        <li>
          <input type="checkbox" checked="false" />
          <span>第一条信息</span>
          <a href="javascript:;" class="collect">收藏</a>
          <a href="javascript:;" class="cancelCollect">取消收藏</a>
          <a href="javascript:;" class="remove">删除</a>
        </li>
      </ul>
      <footer class="footer">
        <label><input type="checkbox" id="checkAll" />全选/全不选</label>
        <a href="javascript:;" id="remove">删除</a>
        <input type="text" id="newInfo" />
        <a href="javascript:;" id="add">添加</a>
      </footer>
    </section>
    <script>
      // document.querySelector("input").checked = false
      // document.querySelector("input").setAttribute("checked",true);
      var data = [
        {
          id: 0,
          title: "残酷月光 - 费启鸣",
          checked: true,
          collect: true,
        },
        {
          id: 1,
          title: "兄弟 - 艾热",
          checked: true,
          collect: false,
        },
        {
          id: 2,
          title: "毕生 - 夏增祥",
          checked: false,
          collect: true,
        },
        {
          id: 3,
          title: "公子向北去 - 李春花",
          checked: false,
          collect: false,
        },
        {
          id: 4,
          title: "战场 - 沙漠五子",
          checked: true, //是否被勾选   可以不入数据库
          collect: false, //是否收藏 true 收藏 false 没有收藏
        },
      ];
      var listEle = document.querySelector("#list");
      function renderDom(arr) {
        listEle.innerHTML = "";
        arr.forEach(function (item, key) {
          var liEle = document.createElement("li");
          // var checkStr = item.checked?'checked':'';
          liEle.innerHTML = `<input type="checkbox" ${
            item.checked ? "checked" : ""
          } />
          <span>${item.title}</span>
          ${
            item.collect
              ? '<a href="javascript:;" class="cancelCollect">取消收藏</a>'
              : '<a href="javascript:;" class="collect">收藏</a>'
          }
          <a href="javascript:;" class="remove">删除</a>`;
          listEle.appendChild(liEle);
          // 收藏和取消收藏功能；先更改数据  在渲染视图 ；
          // 点击收藏按钮
          var collectEle = liEle.querySelector(".collect");
          // console.log(collectEle)
          // if (collectEle) {
          //   collectEle.onclick = function () {
          //     console.log("点击了收藏按钮");
          //   }
          // }

          collectEle &&
            (collectEle.onclick = function () {
              // console.log("点击了收藏按钮");
              // console.log(key);
              data[key].collect = true;
              // console.log(data);
              renderDom(data);
            });

          // 点击我取消收藏
          var cancelCollectEle = liEle.querySelector(".cancelCollect");
          cancelCollectEle &&
            (cancelCollectEle.onclick = function () {
              // console.log("点击了收藏按钮");
              // console.log(key);
              data[key].collect = false;
              // console.log(data);
              renderDom(data);
            });

          // 收藏和取消收藏功能；先更改数据  在渲染视图 ；
          // 点击收藏按钮
          var collectEle = liEle.querySelector(".collect");
          // console.log(collectEle)
          // if (collectEle) {
          //   collectEle.onclick = function () {
          //     console.log("点击了收藏按钮");
          //   }
          // }

          collectEle &&
            (collectEle.onclick = function () {
              // console.log("点击了收藏按钮");
              // console.log(key);
              data[key].collect = true;
              // console.log(data);
              renderDom(data);
            });

          // 点击我取消收藏
          var cancelCollectEle = liEle.querySelector(".cancelCollect");
          cancelCollectEle &&
            (cancelCollectEle.onclick = function () {
              // console.log("点击了收藏按钮");
              // console.log(key);
              data[key].collect = false;
              // console.log(data);
              renderDom(data);
            });
        });
      }
      renderDom(data);
      // 删除功能 ；先删除数据 然后再渲染视图 ；

      // 全选和非全选 ；
      // 点击全选的时候 然上面的选择状态和 勾选状态一致；
      // 获取全选按钮
      var checkAllEle = document.querySelector("#checkAll");
      checkAllEle.onclick = function () {
        // console.log(this.checked);
        // console.log(this);
        var that = this;
        data.forEach(function (item) {
          // console.log(that);
          item.checked = that.checked;
        });
        // console.log(data);
        renderDom(data);
      };

      // 1.什么时候需要判断 底下的全选是否勾选？？
      // 2.如何判断全选获取非全选 ？？

      // 用来判断是否全选了；
      function isCheckAll() {
        var num = 0;
        data.forEach(function (item) {
          if (item.checked) {
            // 记录每个checked勾选为true的时候
            num++;
          }
        });
        if (num == data.length) {
          // console.log("证明需要全选")
          return true;
        } else {
          return false;
        }
        return data.every(function (item) {
          return !item.checked;
        });
        renderDom(res);
      }

      // 删除指定的勾选的音乐 ；
      // 获取删除按钮
      var remvoeEle = document.querySelector("#remove");
      remvoeEle.onclick = function () {
        // 在 data 数组里筛选出 checked 为false的所有数据  放在res数组 ；
        var res = data.filter(function (item) {
          return !item.checked;
        });
        // console.log(res);
        renderDom(res);
      };

      // 添加音乐列表
      // 获取添加按钮 绑定点击事件；
      var addBtn = document.querySelector("#add");
      var newInfoEle = document.querySelector("#newInfo");
      addBtn.onclick = function () {
        var val = newInfoEle.value;
        // console.log(val);
        // 数据驱动 ，先在数据里添加 内容 然后再渲染；
        var id = data[data.length - 1].id + 1;
        var obj = {
          id: id,
          title: val,
          checked: false, //是否被勾选   可以不入数据库
          collect: false, //是否收藏 true 收藏 false 没有收藏
        };
        // console.log(obj);
        data.push(obj);
        // console.log(data);
        renderDom(data);
      };
    </script>
  </body>
</html>
